vue2.0 axios post请求传参问题(ajax请求) |
您所在的位置:网站首页 › ajax post传值 › vue2.0 axios post请求传参问题(ajax请求) |
最近需要做一个项目用vue,由于之前没接触过所以也想挑战下,我不会撘项目,果断选择网上现成搭好的项目。最后我们选择了vue-element-admin网上项目地址放这里 axios post请求问题项目中用的ajax请求是 axios 废话不多说直接上 axios中文文档 我建议在做项目之前先看一下文档,因为说实话这个文档不是太难,先自己吃一下看看能不能咽下去。 我自己在做项目的时候(后端PHP)发现一个问题 Content-Type: application/x-www-form-urlencoded; 设置成form了但是后端还接受不到数据。 请求的配置 但是发现传的参数全在key上边: 大1111.png后端帮我们打印的接收参数(没有接收到): 大2222.png去百度了一下才明白 : axios默认发送数据时,数据格式是Request Payload,并非我们常用的Form Data格式,所以参数必须要以键值对形式传递,不能以json形式传参 传参方法 使用transformRequest,在请求发送前将请求数据进行转换 如果使用模块化开发,可以使用qs模块进行转换 new URLSearchParams() 第一种方法解决: // 这是我创建的 axios实例 const service = axios.create({ // 自己的项目配置 baseURL: 'http://www.management.com/', timeout: 30000, method: 'post', headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' }, // 请求预处理函数 可以把你传的param进行处理 transformRequest: [ data => { // data 就是你post请求传的值 // 一下主要是吧数据拼接成 类似get格式 let params = '' for (var index in data) { params += index + '=' + data[index] + '&' } return params } ] })上面的 transformRequest 主要就是把值处理成如下格式: 1111.png这样子我们在发一次请求: 大3333.png 大4444.png后端接收到了 这是第一种解决办法(本人项目就是用的这种方法, 但是后来忘记是什么原因了 还是使用了第二种方法) 第二种方法解决:尴尬的事情,由于第一种结局方法后端能接收到,但是不好处理,所以我最后还是使用了 qs 这种办法。(这种办法方便明了,极力推荐使用这个方法) var qs = require('qs'); axios.post('/demo', qs.stringify({ 'params': 7758521 }, { indices: false }))qs功能请参考 自行参考 第三种方法解决: var params = new URLSearchParams(); params.append('user', 'value1'); params.append('name', 'value2'); axios.post('/demo', params);请参考 new URLSearchParams() 详细说明文档 以上就是post传参遇到的问题。参考博客 https://blog.csdn.net/call_me_fly/article/details/79012581 https://www.cnblogs.com/yulingjia/p/8205335.html |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |